import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { defineMessages, intlShape, injectIntl, FormattedMessage } from 'react-intl'
import moment from 'moment'
import { Icon, Modal, Toast} from 'antd-mobile'
import { hashHistory } from 'react-router'
import { helper, config, myFetch } from '../utils'
import { messages } from '../trade'

const alert = Modal.alert


class OrderListItem extends Component {
  onClosePostion = () => {
    let propmt = this.props.intl.formatMessage(messages.prompts)
     //console.log(this.props.intl.formatMessage)
     let content = this.props.intl.formatMessage(messages.closeposition)
    alert(propmt, <div className="rt-guadan-alert">{content}</div>, [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => { this.onConfirmClose()}},
    ])
  }
  onConfirmClose = () => {
    const { data } = this.props
    this.props.onClose(data)
    
  }
  render() {
    const { data } = this.props
    console.dir(data)
    return (
      <li className="-item">
        <div className="-item-top">
          <div className="-left">
            <div className="-left-top">
              <FormattedMessage id="ordernumber"/>
              &nbsp;{data.orderNo}
            </div>
            <ul className="-left-center">
              <li className="-one">
                <div className="-one-left-top">
                  <FormattedMessage id={helper.splitString(data.ccypairCd)[0]}/>
                  <span>/</span>
                  <FormattedMessage id={helper.splitString(data.ccypairCd)[1]}/>
                </div>
                <div className={`-one-left-center ${data.bsCls == 0 ? '' : '-green'}`}>
                  {
                    data.bsCls == 0 ? <FormattedMessage id="sell"/> : <FormattedMessage id="buy"/>
                  }
                </div>
                <div className="-one-left-bottom">
                  {helper.accDiv(data.positionAmt, 1000)}
                </div>
              </li>
              <li className="-two">
                {/*<span className="-two-first">止盈：<em>1.10134</em></span>
                <span className="-two-second">止盈：<em>无</em></span>*/}
                <div>建仓时间 {moment(data.execDt, "YYYY-MM-DD hh:mm:ss").format('YYYY-MM-DD hh:mm:ss')}</div>
                <span className="-two-third">
                  x 1000<FormattedMessage id={helper.splitString(data.ccypairCd)[0]}/>
                </span>
              </li>
            </ul>
          </div>
          <div className="-right">
            <div className="-right-top">{data.unSettledPl}</div>
            <div className="-right-bottom">建仓价格：<span>{data.execPrice}</span></div>
          </div>
        </div>
        {/*<div className="-item-center">
          <div>建仓时间 {moment(data.execDt, "YYYY-MM-DD hh:mm:ss").format('YYYY-MM-DD hh:mm:ss')}</div>
          <div>隔夜利息: <span>113.69</span></div>
        </div>*/}
        <div className="-item-bottom">
          <div
            className="-bottom-left"
            onClick={
              () => {
                hashHistory.push({
                  pathname: '/position/details',
                  query: {
                    orderno: data.orderNo,
                    direction: data.bsCls,
                    ccyPair: data.ccypairCd,
                    amn: data.positionAmt
                  }
                })
              }
            }
          >
            设置获利或止损
          </div>
          <div
            className="-bottom-right"
            onClick={
              () => {
                this.onClosePostion()
              }
            }
          >
            平 仓
          </div>
        </div>
      </li>
    )
  }
}

OrderListItem.propType = {
  intl: intlShape.isRequired
}
export default injectIntl(OrderListItem)

